<template>
	<view class="container">
		<slot v-if="!isNoData && !isLoading"></slot>
		<view class="loading" v-if="isLoading" :style="{ position: isFixed ? 'fixed' : 'relative' }">
			<!-- <image class="img" mode="aspectFill" src="@/static/page_loading.gif"></image> -->
			<w-loading text="加载中.." :mask="true" :click="true" ref="loading"></w-loading>
		</view>
		<no-data
			v-if="isnoDataDelayOk && isNoData && !isLoading"
			class="nodata"
			:style="{ position: isFixed ? 'fixed' : 'relative' }"
			:type="nodataoption.type"
			:icon="nodataoption.icon"
			:icon-w="nodataoption.iconW"
			:icon-H="nodataoption.iconH"
			:icon-bottom="nodataoption.iconBottom"
			:text="nodataoption.text"
			:btn-text="nodataoption.btnText"
			@btnClick="btnClick"
		></no-data>
		<login-view
			class="login"
			:style="{ position: isFixed ? 'fixed' : 'relative' }"
			v-if="hasLogin"
			:icon="loginviewOption.icon"
			:icon-w="loginviewOption.iconW"
			:icon-H="loginviewOption.iconH"
			:icon-bottom="loginviewOption.iconBottom"
			:name="loginviewOption.name"
		></login-view>
	</view>
</template>

<script>
import noData from '../nodata/nodata.vue';
import wLoading from '../w-loading/w-loading.vue';
import loginView from '../login-view/login-view.vue';
export default {
	components: {
		noData,
		wLoading,
		loginView
	},
	props: {
		isNoData: {
			//是否没数据
			type: Boolean,
			default: false
		},
		isLoading: {
			// 是否加载
			type: Boolean,
			default: false
		},
		hasLogin: {
			// 是否要登录
			type: Boolean,
			default: false
		},
		nodataOption: {
			type: Object,
			default: function() {
				return {
					type: 'nobtn',
					icon: '../../static/img_nodata.png',
					iconW: '65%',
					iconH: '58vw',
					iconBottom: '40rpx',
					text: '无数据'
				};
			}
		},
		loginViewOption: {
			type: Object,
			default: function() {
				return {
					icon: '../../static/img_nodata.png',
					iconW: '65%',
					iconH: '58vw',
					iconBottom: '40rpx',
					name: '无数据'
				};
			}
		},
		isFixed: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		nodataOption(newVal, oldVal) {
			if (newVal) this.nodataoption = Object.assign(this.nodataoption, newVal);
		},
		loginViewOption(newVal, oldVal) {
			if (newVal) this.loginviewOption = Object.assign(this.loginviewOption, newVal);
		}
	},
	data() {
		return {
			isnoDataDelayOk: false,
			noDataDelay: 500, //nodata延迟秒数
			nodataoption: {
				type: 'nobtn',
				icon: '../../static/img_nodata.png',
				iconW: '65%',
				iconH: '58vw',
				iconBottom: '0rpx',
				text: '',
				btnText: '',
				btnClick: undefined
			},
			loginviewOption: {
				icon: '../../static/img_nodata.png',
				iconW: '65%',
				iconH: '58vw',
				iconBottom: '40rpx',
				name: '无数据'
			}
		};
	},
	methods: {
		btnClick(even) {
			if (this.option && this.option.btnClick) this.option.btnClick();
			this.$emit('btnClick', even);
		}
	},
	mounted() {
		this.nodataoption = Object.assign(this.nodataoption, this.nodataOption);
		this.loginviewOption = Object.assign(this.loginviewOption, this.loginViewOption);
		setTimeout(() => {
			this.isnoDataDelayOk = true;
		}, this.noDataDelay);
		console.log('container', this);
	}
};
</script>

<style lang="scss">
.container {
	width: 100%;
	height: 100%;
	// position: relative;
	.nodata {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// background-color: #fff;
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.loading {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		z-index: 200;
		display: flex;
		justify-content: center;
		align-items: center;
		.img {
			width: 50%;
		}
	}
	.login {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		z-index: 300;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
